body {
    background-color: rgb(20, 20, 20);
}

#leet-code-ultimate-box {
    --width: 300px;
    --height: 64px;
    background-color: rgba(0, 0, 0);
    position: absolute;
    top: 30%;
    left: calc(50% - 150px);
    width: var(--width);
    height: var(--height);
    border-radius: 8px;
    box-shadow: rgb(0 0 0 / 20%) 0 0 8px;
    color: rgb(225, 225, 225);
    display: grid;
    --progress: 10;
    grid-template-columns: var(--height) 1fr var(--height);
}

#leet-code-ultimate-box > * {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: pre;
    text-align: center;
}

#leet-code-ultimate-status > div {
    width: calc(var(--height) / 4);
    height: calc(var(--height) / 4);
    border-radius: 10000px;
    background-color: var(--color);
    transition: all .3s;
    box-shadow: var(--color) 0 0 8px 4px;
}

#leet-code-ultimate-message {
}

#leet-code-ultimate-loading {
    animation: leet-code-ultimate-loading-outer 4.5s infinite;
    opacity: 1;
    transition: opacity .3s;
}

#leet-code-ultimate-loading.hide {
    opacity: 0;
}

#leet-code-ultimate-loading > svg {
    width: calc(var(--height) / 2);
    height: calc(var(--height) / 2);
    filter: drop-shadow(var(--color) 0 0 8px 4px);
    fill: var(--color);
    transition: all .3s;
    animation: leet-code-ultimate-loading 1s infinite;
}

@keyframes leet-code-ultimate-loading-outer {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes leet-code-ultimate-loading {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

.info {
    --color: #1583ce;
}

.success {
    --color: #47d589;
}

.warning {
    --color: #d05314;
}

.error {
    --color: #d5183d;
}